<template>
  <NConfigProvider
    v-if="!isLock"
    :locale="zhCN"
    :theme="getDarkTheme"
    :theme-overrides="getThemeOverrides"
    :date-locale="dateZhCN"
  >
    <AppProvider>
      <n-message-provider>
        <RouterView />
      </n-message-provider>
    </AppProvider>
  </NConfigProvider>

  <transition v-if="isLock && $route.name !== 'login'" name="slide-up">
    <LockScreen />
  </transition>
</template>

<script lang="ts" setup>
  import { computed, onMounted, onUnmounted } from 'vue';
  import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui';
  import { LockScreen } from '@/components/Lockscreen';
  import { AppProvider } from '@/components/Application';
  import { useLockscreenStore } from '@/store/modules/lockscreen';
  import { useRoute } from 'vue-router';
  import { useDesignSettingStore } from '@/store/modules/designSetting';
  import { lighten } from '@/utils/index';
  import { useWxwebsocketStoreWidthOut, wxWebsocketStore } from '@/store/modules/wxWebsocket';
  import { WXSOCKET_TYPES_REQUEST, WxWebsocketUri } from '@/constants/global';
  import { useUserStoreWidthOut } from './store/modules/user';

  const route = useRoute();
  const useLockscreen = useLockscreenStore();
  const designStore = useDesignSettingStore();
  const isLock = computed(() => useLockscreen.isLock);
  const lockTime = computed(() => useLockscreen.lockTime);

  /**
   * @type import('naive-ui').GlobalThemeOverrides
   */
  const getThemeOverrides = computed(() => {
    const appTheme = designStore.appTheme;
    const lightenStr = lighten(designStore.appTheme, 6);
    return {
      common: {
        primaryColor: appTheme,
        primaryColorHover: lightenStr,
        primaryColorPressed: lightenStr,
      },
      LoadingBar: {
        colorLoading: appTheme,
      },
    };
  });

  const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));

  let timer;

  const timekeeping = () => {
    clearInterval(timer);
    if (route.name == 'login' || isLock.value) return;
    // 设置不锁屏
    useLockscreen.setLock(false);
    // 重置锁屏时间
    useLockscreen.setLockTime();
    timer = setInterval(() => {
      // 锁屏倒计时递减
      useLockscreen.setLockTime(lockTime.value - 1);
      if (lockTime.value <= 0) {
        // 设置锁屏
        useLockscreen.setLock(true);
        return clearInterval(timer);
      }
    }, 1000);
  };

  const wxWsStore = useWxwebsocketStoreWidthOut();
  console.log(wxWsStore);
  wxWsStore
    .setWebsocket({
      context: this,
      uri: WxWebsocketUri,
      onClose: () => {
        console.log('App.vue---Websocket OnClose');
      },
    })
    .then((res) => {
      // 打开链接后发送鉴权信息
      const userStore = useUserStoreWidthOut();
      const token = userStore.getToken;
      const authObj = {
        data: token,
        type: WXSOCKET_TYPES_REQUEST.AUTH_LOGIN_REQUEST,
        serialNumber: 0, // 每次消息+1保证时序性，在store里面操作
        // serialNumber: uuid()
      };
      wxWsStore.sendMessage({
        message: authObj,
        serialNumber: authObj.serialNumber,
        callback: () => {
          // 这里开始重新发送之前可能发送失败的消息，一般是用户已登录过或者刷新页面出现的情况
          // this.$store.dispatch('sendReMessage');
          // if (isReconnect) {
          //   this.$message.success({
          //     content: 'Websocket重连成功',
          //     key: 'websocket_reconnect',
          //     duration: 2,
          //   });
          // }
          // this.$message.success('Websocket重连成功', 2.5)
          console.log('登录请求发送完成');
        },
      });
      // this.$store.dispatch('sendMessage', {
      //   message: authObj,
      //   serialNumber: authObj.serialNumber,
      //   callback: () => {
      //     // 这里开始重新发送之前可能发送失败的消息，一般是用户已登录过或者刷新页面出现的情况
      //     this.$store.dispatch('sendReMessage');
      //     if (isReconnect) {
      //       this.$message.success({
      //         content: 'Websocket重连成功',
      //         key: 'websocket_reconnect',
      //         duration: 2,
      //       });
      //     }
      //     // this.$message.success('Websocket重连成功', 2.5)
      //     console.log('登录请求发送完成');
      //   },
      // });
    });

  onMounted(() => {
    document.addEventListener('mousedown', timekeeping);
    // app.config.globalProperties.$message = useMessage();
  });

  onUnmounted(() => {
    document.removeEventListener('mousedown', timekeeping);
  });
</script>

<style lang="less">
  @import 'styles/wuxia-global.less';
  @import 'styles/index.less';
  @import 'styles/wuxia-var.less';
  .n-input .n-input__prefix {
    margin-bottom: 4px;
  }
</style>
